<template>
  <view class="page custom-page">
    <custom-head gradient back title="最新动态"> </custom-head>
    <view class="form">
      <u-form :model="form" ref="uForm" label-width="180">
        <u-form-item label="标题" label-position="top">
          <u-input v-model="form.title" placeholder="请输入标题" />
        </u-form-item>
        <u-form-item label="正文内容" label-position="top">
          <u-input v-model="form.content" type="textarea" placeholder="请输入最新动态正文内容" />
        </u-form-item>
        <u-form-item>
          <u-upload
            ref="uUpload"
            max-count="1"
            :file-list="fileList"
            :form-data="{ type: 'avatar' }"
            :header="{ Authorization: token }"
            :action="BASE_URL + '/file/upload'"
            @on-change="onSuccess"
            @on-remove="omRemove"
            style="height: 100px"
            label-position="top"
          >
            <view slot="addBtn">
              <text style="font-size: 80px; margin-top: 20px" class="iconfont icon-tianjiatupian bao_111"></text>
            </view>
          </u-upload>
        </u-form-item>
        <view class="text_1">
          <view class="add_text">添加照片</view>
          <view class="text_2">支持JPG/PNG/jepg, 大小不超过5M</view>
        </view>
        <u-form-item label="是否发布">
          <u-switch slot="right" v-model="form.status"></u-switch>
        </u-form-item>
      </u-form>

      <view class="button submit" @click="submit">
        {{ id ? '确认修改' : '确定' }}
      </view>
    </view>
  </view>
</template>

<script>
import { BASE_URL } from '../../api/config'
import { getFileDetail } from '../../api/modules/file';
import { addNews, getNewsDetail, updateNews } from '../../api/modules/news'
import { toPage } from '@/utils'

export default {
  data() {
    return {
      form: {
        title: '',
        content: '',
        img: '',
        status: '',
      },
      id: '',
      fileList: [],
      action: 'http://www.example.com/upload',
      BASE_URL,
      token: uni.getStorageSync('token'),
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
    }
  },

  mounted() {
    const id = this.$route.query.id
    if (id) {
      this.id = id
      this._getNewsDetail(this.$route.query.id)
    }
  },

  methods: {
    toPage,

    submit() {
      this.form.status = this.form.status ? 1 : 0
      let data = {
        ...this.form,
        sid: this.glbId
      }
      console.log('保存', data)
      if (this.id) {
        this._updateNews(data)
      } else {
        this._addNews(data)
      }
    },
    omRemove(index) { // 移除照片
			if (index === 0) {
				this.fileList = []
				this.form.main_pic = ''
			}
		},
    onSuccess(data) {
      const res = JSON.parse(data.data)
      if (res.code == 201) {
        this.form.main_pic = res.data.path
      } else {
        this.$refs.uUpload.clear()
        this.$u.toast('上传失败')
      }
    },

    _addNews(data) {
      addNews(data).then((res) => {
        if (res.code == 201) {
          this.$u.toast('添加成功')
          uni.navigateBack({
              delta: 1
          })
          this.form = {}
        } else {
          this.$u.toast(res.message)
        }
      })
    },

    _updateNews(data) {
      updateNews(this.id, data).then((res) => {
        if (res.code == 201) {
          this.$u.toast('修改成功')
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000)
        } else {
          this.$u.toast(res.message)
        }
      })
    },

    _getNewsDetail(data) {
      getNewsDetail(data).then((res) => {
        const { id, status, name, desc, main_pic, title, content } = res.data
        this.form = { id, status: !!status, content, main_pic, title, name }
        this.fileList = [{ url: `${this.static_uri}${main_pic}` }]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  height: 100vh;
}
.form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background-color: #fff;
  padding: 0px 45rpx;
  overflow: hidden;

  .bao_111 {
    color: #b9b9b9;
  }

  .text_1 {
    .add_text {
      color: #b9b9b9;
      text-indent:1em;
      margin-bottom: 4rpx;
      font-size: 24rpx;
    }
    .text_2 {
      color: #b9b9b9;
      font-size: 24rpx;
    }
  }
}

.button {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  margin: 80rpx 0 40rpx 0;
  background-color: #2979ff;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  line-height: 88rpx;
}
</style>
